
var raddarChart = document.getElementById('raddarChart');
var heat = echarts.init(raddarChart);
var heatMonth = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
var heatYear = ['加盟宝', '升级宝', '贷款宝',
        '项目宝', '提货宝', '一级经销商产品'];

var data = [[0,0,5],[0,1,1],[0,2,2],[0,3,1],[0,4,5],[0,5,7],[0,6,5],[0,7,2],[0,8,4],[0,9,2],[0,10,1],[0,11,2],[1,0,7],[1,1,6],[1,2,2],[1,3,1],[1,4,9],[1,5,1],[1,6,4],[1,7,8],[1,8,9],[1,9,9],[1,10,5],[1,11,2],[2,0,1],[2,1,1],[2,2,6],[2,3,5],[2,4,2],[2,5,1],[2,6,3],[2,7,1],[2,8,1],[2,9,8],[2,10,3],[2,11,2],[3,0,7],[3,1,3],[3,2,1],[3,3,2],[3,4,3],[3,5,1],[3,6,4],[3,7,2],[3,8,1],[3,9,3],[3,10,5],[3,11,4],[4,0,1],[4,1,3],[4,2,1],[4,3,5],[4,4,1],[4,5,1],[4,6,3],[4,7,3],[4,8,6],[4,9,2],[4,10,4],[4,11,4],[5,0,2],[5,1,1],[5,2,2],[5,3,3],[5,4,1],[5,5,2],[5,6,1],[5,7,3],[5,8,2],[5,9,1],[5,10,4],[5,11,1]];

data = data.map(function (item) {
    return [item[1], item[0], item[2] || '-'];
});

var heatOption = {
    tooltip: {
        position: 'top'
    },
    title: {
        text: '2017年各产品每月逾期率',
        left: 'center'
    },
    animation: false,
    grid: {
        height: '50%',
        y: '15%',
        x: '18%'
    },
    xAxis: {
        type: 'category',
        data: heatMonth,
        splitArea: {
            show: true
        }
    },
    yAxis: {
        type: 'category',
        data: heatYear,
        splitArea: {
            show: true
        },
        axisLabel: {
            rotate : 50
        }
    },
    visualMap: {
        min: 0,
        max: 10,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        bottom: '15%'
    },
    series: [{
        name: 'Punch Card',
        type: 'heatmap',
        data: data,
        label: {
            normal: {
                show: true
            }
        },
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};
heat.setOption(heatOption)